<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>更新起送费</p>
		</header>
		<!-- 更新起送费部分 -->
		<div class="form-box">
			<li>
				<div class="title">
					起送费:
				</div>
				<div class="content">
					<input type="text" v-model="newstarPrice" placeholder="起送费">
				</div>
			</li>
		</div>
		<!--保存按钮-->
		<div class="save-button" @click="toUpdatestarPrice">
			<button>保存</button>
		</div>
		<!-- 底部菜单部分 -->
		<BusinessFooter />
	</div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'; 
import qs from 'qs';
import BusinessFooter from '../components/BusinessFooter.vue';

export default {
	name: 'UpdatestarPrice',
	components: {
		BusinessFooter
	},
	setup() {
		const newstarPrice = ref('');
		const business = reactive({
			businessId: '',
			businessName: '',
			businessAddress: '',
			businessExplain: '',
			orderTypeId: '',
			starPrice: '',
			deliveryPrice: '',
			remarks: '',
			password: ''
		});

		const router = useRouter();

		const loadBusinessData = () => {
			const storedBusiness = JSON.parse(sessionStorage.getItem('business'));
			if (storedBusiness) {
				Object.assign(business, storedBusiness); // 将session中的数据合并到business对象
			}
		};

		onMounted(() => {
			loadBusinessData();
		});

		const toUpdatestarPrice = () => {
			if (!newstarPrice.value) {
				alert('起送费不能为空！');
				return;
			}
			business.starPrice = newstarPrice.value;

			// 使用axios发起请求
			axios.put('/Business', qs.stringify(business))
				.then(response => {
					if (response.data > 0) {
						sessionStorage.setItem('business', JSON.stringify(business));
						alert('修改起送费成功！');
					} else {
						alert('修改起送费失败！');
					}
				})
				.catch(error => {
					console.error(error);
				});
		};

		return {
			newstarPrice,
			business,
			toUpdatestarPrice
		};
	}
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 修改起送费部分 ******************/
.wrapper .form-box {
	width: 100%;
	padding-top: 12vw;
}

.wrapper .form-box li {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 3vw 3vw 0;
}

.wrapper .form-box li .title {
	flex: 0 0 18vw;
	font-size: 3.5vw;
	font-weight: 700;
	color: darkslategray;
}

.wrapper .form-box li .content {
	flex: 1;
}

.wrapper .form-box li .content input {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 2vw;
	border-radius: 3vw;
	background-color: white;
	font-size: 3vw;
	border: none;
	outline: none;
}

/****************** 保存按钮部分 ******************/
.wrapper .save-button {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw 10vw 0;
}

.wrapper .save-button button {
	width: 100%;
	height: 10vw;
	background-color: mediumseagreen;
	border: none;
	outline: none;
	border-radius: 4vw;
	font-size: 3.5vw;
	color: white;
	cursor: pointer;
}
</style>
